<template>
  <div class="box-com">
    <h2>类目管理</h2>
    <div class="category-list">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        @click="handleAddCategory"
      >添加类目</el-button>
      <el-table
        :data="categoryList"
        max-height="400"
      >
        <el-table-column
          prop="name"
          label="名称"
        >
        </el-table-column>
        <el-table-column
          prop="createdAt"
          label="创建时间"
          :formatter="formatterDate"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="150px"
        >
          <template #default="scope">
            <el-button
              type="text"
              @click="handleEditCategory(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              @click="handleDeleteCategory(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="box-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :total="total"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes,jumper"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增类目 编辑类目面板 -->
    <right-panel
      v-model="panelVisible"
      :title="panelTitle"
      :size="330"
    >
      <edit-category
        :type="editType"
        :data="editData"
        @submit="handleSubmitCategory"
      />
    </right-panel>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, getCurrentInstance, onMounted, ref, watchEffect } from 'vue'
import { CategoryData, getCategory, removeCategoryByID, addNewCategory, updateCategoryByID } from '@/api/category'
import EditCategory from './components/editCategory.vue'
import RightPanel from '@/components/RightPanel/index.vue'
import dayjs from 'dayjs'
export default defineComponent({
  name: 'Category',
  components: {
    RightPanel,
    EditCategory
  },
  setup() {
    const { proxy } = getCurrentInstance()!
    const pageNum = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const panelVisible = ref(false)
    const categoryList = ref<CategoryData[]>([])
    const editData = ref<CategoryData | undefined>(undefined)
    const editType = ref(1) // 0编辑 1新增
    const panelTitle = computed(() => editType.value === 1 ? '新增类目' : '编辑类目')
    const getCategoryList = () => {
      getCategory({
        pageNum: pageNum.value,
        pageSize: pageSize.value
      }).then(res => {
        const { data } = res
        categoryList.value = data?.category
        total.value = data?.total
      })
    }
    onMounted(() => {
      // getCategoryList()
    })
    // 自动追踪相关依赖属性变动获取数据
    watchEffect(() => {
      getCategoryList()
    })
    // 格式化日期
    const formatterDate = (row: CategoryData) => {
      return dayjs(row.createdAt).format('YYYY-MM-DD HH:mm:ss')
    }
    // 分页
    const handleSizeChange = (val: number) => {
      pageSize.value = val
      getCategoryList()
    }
    const handleCurrentChange = (val: number) => {
      pageNum.value = val
      getCategoryList()
    }
    // 新增类目弹窗处理
    const handleAddCategory = () => {
      editType.value = 1
      editData.value = {} as CategoryData
      panelVisible.value = true
    }
    // 编辑类目弹窗处理
    const handleEditCategory = (row: CategoryData) => {
      editType.value = 0
      editData.value = { ...row }
      panelVisible.value = true
    }
    // 删除类目处理
    const handleDeleteCategory = (row: CategoryData) => {
      proxy?.$confirm(`您确认要删除类目${row.name}吗？`, '删除确认', {
        type: 'warning'
      }).then(() => {
        removeCategoryByID(row.id).then(() => {
          proxy?.$message.success('类目删除成功')
          getCategoryList()
        }).catch(() => {
          proxy?.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      })
    }
    // 新增类目
    const addNewCategoryFun = (data:CategoryData) => {
      addNewCategory(data).then(() => {
          proxy?.$message.success('类目添加成功')
          panelVisible.value = false
          getCategoryList()
      })
    }
    // 编辑类目
    const editCategoryFun = (data:CategoryData) => {
      updateCategoryByID(data.id, data).then(() => {
          proxy?.$message.success('类目编辑成功')
          panelVisible.value = false
          getCategoryList()
      })
    }
    // 提交新增类目信息
    const handleSubmitCategory = (data:CategoryData) => {
      if (editType.value === 1) {
        addNewCategoryFun(data)// 新增
      } else if (editType.value === 0) {
        editCategoryFun(data)// 编辑
      }
    }
    return {
      pageNum,
      pageSize,
      total,
      handleSizeChange,
      handleCurrentChange,
      categoryList,
      editType,
      panelTitle,
      panelVisible,
      editData,
      handleAddCategory,
      handleEditCategory,
      handleDeleteCategory,
      addNewCategoryFun,
      editCategoryFun,
      handleSubmitCategory,
      formatterDate
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
